<script setup lang="ts">
import Header from '@/components/Header.vue';
import MarkdownIt from 'markdown-it';
import plainData from './index.json';
import Message from 'primevue/message';
import Card from 'primevue/card';
import Button from 'primevue/button';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import Panel from 'primevue/panel';
import Tag from 'primevue/tag';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import packages from '@/scripts/packages';
import router from '@/router';

const jsonData: any = plainData;
const index = packages[jsonData.metadata.name];
const distributions = index.distributions;

const md = new MarkdownIt();

function slice_url(urlString: string, host: boolean = true): string {
    const url = new URL(urlString)
    if (host) {
        return url.host + url.pathname.slice(1)
    } else {
        return url.pathname.slice(1)
    }
}

function link_to(url: string, blank?: boolean) {
    if (blank == true) {
        window.open(url, "_blank")
    } else {
        window.location.href = url;
    }
}

function tablize(data: { [key: string]: string }): {
    name: string;
    desc: unknown;
}[] {
    return Object.entries(data).map(([key, value]) => {
        return { name: key, desc: md.render(value) };
    })
}
</script>

<template>
    <main>
        <Header></Header>
        <div class="w-full flex align-items-center justify-content-center">
            <div class="w-full flex flex-column align-items-start justify-content-center pt-6 p-3 gap-6"
                style="max-width: 960px;">
                <Card class="w-full">
                    <template #title>
                        <Message v-if="index.latestVersion != jsonData.metadata.version" severity="warn"
                            :closable="false">此版本不是最新版，<Button @click="router.push('/packages/' + index.name)"
                                :label="index.latestVersion" class="pt-0 pb-0 pl-1 pr-1" plain text></Button>已发布！
                        </Message>
                        <div class="header gap-3 align-items-center justify-content-between">
                            <h1 class="text-5xl">
                                {{ jsonData.metadata.name }}
                                <span class="text-base text-gray-400">v{{ jsonData.metadata.version }}</span>
                            </h1>
                            <div v-if="jsonData.metadata.urls !== undefined">
                                <Button v-if="jsonData.metadata.urls.homepage !== undefined"
                                    @click="link_to(jsonData.metadata.urls.homepage, true)" icon="pi pi-home" plain
                                    text></Button>
                                <Button v-if="jsonData.metadata.urls.repository !== undefined"
                                    @click="link_to(jsonData.metadata.urls.repository, true)" icon="pi pi-github" plain
                                    text></Button>
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <p class="mt-0 mb-1">
                            {{ jsonData.metadata.description }}
                        </p>
                    </template>
                    <template #footer>
                        <div class="flex flex-row flex-wrap gap-3">
                            <div v-for="topic in jsonData.metadata.topics">
                                <Tag :value="`#${topic}`"></Tag>
                            </div>
                        </div>
                    </template>
                </Card>

                <TabView class="w-full md">
                    <TabPanel header="自述">
                        <div class="readme pt-2">
                            <div>
                                <Card>
                                    <template #content>
                                        <div v-html="md.render(jsonData.readme)"></div>
                                    </template>
                                </Card>
                            </div>
                            <div class="p-3 pt-2 pr-0">
                                <div>
                                    <h2 class="pl-1 text-lg">元数据</h2>
                                    <div class="flex flex-column align-items-start pb-1">
                                        <Button icon="pi pi-calendar-plus" :label="jsonData.doc_create_at" plain
                                            text></Button>
                                        <Button plain text>
                                            <div class="flex flex-row flex-wrap gap-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                    viewBox="0 0 100 100" width="17" height="17">
                                                    <path
                                                        d="M40 62.5h-.003c0-2.528.21-1.364-13.29-28.36-2.757-5.515-10.654-5.526-13.416 0C-.322 61.366.003 60.051.003 62.5H0C0 69.403 8.955 75 20 75s20-5.597 20-12.5zm-20-25L31.25 60H8.75zm79.997 25c0-2.528.21-1.364-13.29-28.36-2.757-5.515-10.654-5.526-13.416 0C59.678 61.366 60.003 60.051 60.003 62.5H60C60 69.403 68.955 75 80 75s20-5.597 20-12.5zM68.75 60L80 37.5 91.25 60zM82.5 80H55V33.945c3.673-1.608 6.431-4.918 7.248-8.945H82.5a2.5 2.5 0 002.5-2.5v-5a2.5 2.5 0 00-2.5-2.5H59.944c-2.282-3.019-5.867-5-9.944-5-4.077 0-7.662 1.981-9.944 5H17.5a2.5 2.5 0 00-2.5 2.5v5a2.5 2.5 0 002.5 2.5h20.252c.817 4.025 3.573 7.337 7.248 8.945V80H17.5a2.5 2.5 0 00-2.5 2.5v5a2.5 2.5 0 002.5 2.5h65a2.5 2.5 0 002.5-2.5v-5a2.5 2.5 0 00-2.5-2.5z">
                                                    </path>
                                                </svg>
                                                <span class="text-cascadia">
                                                    {{ jsonData.metadata.license }}
                                                </span>
                                            </div>
                                        </Button>
                                    </div>
                                </div>
                                <div>
                                    <h2 class="pl-2 text-lg">安装</h2>
                                    <div class="flex flex-column align-items-start pb-1 pt-1 p-3 gap-3">
                                        <Panel header="IPM 安装" class="w-full">
                                            <pre class="m-0"><code>ipm add {{ jsonData.metadata.name }}</code></pre>
                                        </Panel>
                                        <Panel header="使用 infini.toml" class="w-full">
                                            <pre class="m-0"><code>{{ jsonData.metadata.name }} = "{{ jsonData.metadata.version
                                    }}"</code></pre>
                                        </Panel>
                                    </div>
                                </div>
                                <div v-if="jsonData.metadata.urls !== undefined">
                                    <div v-if="jsonData.metadata.urls.homepage !== undefined">
                                        <h2 class="pl-2 text-lg">主页</h2>
                                        <div class="flex flex-column align-items-start pb-1">
                                            <Button @click="link_to(jsonData.metadata.urls.homepage)" icon="pi pi-link"
                                                :label="slice_url(jsonData.metadata.urls.homepage)"
                                                class="w-full flex flex-row justify-content-start" plain text>
                                            </Button>
                                        </div>
                                    </div>
                                    <div v-if="jsonData.metadata.urls.documentation !== undefined">
                                        <h2 class="pl-2 text-lg">文档</h2>
                                        <div class="flex flex-column align-items-start pb-1">
                                            <Button @click="link_to(jsonData.metadata.urls.documentation)"
                                                icon="pi pi-box"
                                                :label="slice_url(jsonData.metadata.urls.documentation)" class="w-full"
                                                plain text>
                                            </Button>
                                        </div>
                                    </div>
                                    <div v-if="jsonData.metadata.urls.repository !== undefined">
                                        <h2 class="pl-2 text-lg">仓库</h2>
                                        <div class="flex flex-column align-items-start pb-1">
                                            <Button @click="link_to(jsonData.metadata.urls.repository)"
                                                icon="pi pi-github"
                                                :label="slice_url(jsonData.metadata.urls.repository, false)"
                                                class="w-full" plain text>
                                            </Button>
                                        </div>
                                    </div>
                                    <div>
                                        <h2 class="pl-2 text-lg">作者</h2>
                                        <div class="flex flex-column align-items-start pb-1">
                                            <div v-for="author in jsonData.metadata.authors">
                                                <Button icon="pi pi-user" :label="author.name" plain text></Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </TabPanel>
                    <TabPanel header="指令文档">
                        <Panel header="规则包指令">
                            <div v-for="(event, name) in jsonData.handlers">
                                <h2><code>{{ name }}</code>指令</h2>
                                <span v-if="event.description !== null" class="text-gray-400 pl-2">{{
                            event.description
                        }}</span>
                                <pre v-if="event.usage !== null"><code>{{ event.usage }}</code></pre>
                                <div v-if="event.content" class="p-1" v-html="md.render(event.content)"></div>
                                <div v-for="(cmd, name) in event.sub_cmd">
                                    <h3><code>{{ name }}</code>选项</h3>
                                    <span v-if="cmd.description !== null" class="text-gray-400 pl-2">{{
                            cmd.description
                        }}</span>
                                    <pre v-if="event.usage !== null"><code>{{ cmd.usage }}</code></pre>
                                    <div v-if="cmd.content" class="p-1" v-html="md.render(cmd.content)"></div>
                                </div>
                            </div>
                        </Panel>
                    </TabPanel>
                    <TabPanel v-if="jsonData.events" header="消息事件">
                        <Panel header="消息事件">
                            <div v-for="(event, name) in jsonData.events">
                                <h2><code>{{ name }}</code></h2>
                                <span v-if="event.description !== null" class="text-gray-400 pl-2">{{ event.description
                                    }}</span>
                                <div></div>
                                <div class="p-1" v-if="event.content !== null" v-html="md.render(event.content)"></div>
                                <DataTable class="m-2 p-2" showGridlines stripedRows
                                    v-if="Object.keys(event.var_doc).length !== 0" :value="tablize(event.var_doc)">
                                    <Column field="name" header="变量"></Column>
                                    <Column field="desc" header="描述">
                                        <template #body="slotProps">
                                            <div v-html="slotProps.data.desc"></div>
                                        </template>
                                    </Column>
                                </DataTable>
                            </div>
                        </Panel>
                    </TabPanel>
                    <TabPanel v-if="Object.keys(jsonData.global_variables).length !== 0" header="全局变量">
                        <Panel header="全局变量">
                            <div v-for="(event, name) in jsonData.global_variables">
                                <h2><code>{{ name }}</code></h2>
                                <span v-if="event.description !== null" class="text-gray-400 pl-2">{{ event.description
                                    }}</span>
                                <pre v-if="event.usage !== null"><code>{{ event.usage }}</code></pre>
                                <div class="p-1" v-if="event.content !== null" v-html="md.render(event.content)"></div>
                            </div>
                        </Panel>
                    </TabPanel>
                    <TabPanel v-if="Object.keys(jsonData.interceptors).length !== 0" header="拦截器">
                        <Panel header="拦截器">
                            <div v-for="(event, name) in jsonData.interceptors">
                                <h2><code>{{ name }}</code>拦截器</h2>
                                <span v-if="event.description !== null" class="text-gray-400 pl-2">{{ event.description
                                    }}</span>
                                <pre v-if="event.usage !== null"><code>{{ event.usage }}</code></pre>
                                <div class="p-1" v-if="event.content !== null" v-html="md.render(event.content)"></div>
                            </div>
                        </Panel>
                    </TabPanel>
                    <TabPanel v-if="distributions !== undefined" :header="distributions.length + ' 个版本'">
                        <div class="flex flex-column gap-3">
                            <Card v-for="distribution in distributions" @click="router.push(distribution.readme_url)"
                                class="no-content">
                                <template #title>
                                    <div class="header gap-3 align-items-center justify-content-between">
                                        <h1 class="text-5xl m-0 mt-1">
                                            {{ jsonData.metadata.name }}
                                            <span class="text-base text-gray-400">v{{ distribution.version
                                                }}</span>
                                        </h1>
                                    </div>
                                </template>
                            </Card>
                        </div>
                    </TabPanel>
                </TabView>
            </div>
        </div>
    </main>
</template>

<style scoped>
:deep(.p-button-label) {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex: 0 1 auto;
}

.header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    word-break: break-word;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bold;
}

.text-cascadia {
    font-family: 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

@media only screen and (min-width: 890px) {
    .readme {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    }
}
</style>
